<template>
  <div>
    <!-- 面包屑导航区域 -->
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/home' }">
        当前位置：首页
      </el-breadcrumb-item>
      <el-breadcrumb-item>项目管理</el-breadcrumb-item>
      <el-breadcrumb-item>服务管理</el-breadcrumb-item>
    </el-breadcrumb>

    <!-- 卡片视图区域 -->
    <el-card>
      <!-- 搜索区 -->
      <el-form ref="searchFormRef" :inline="true" :model="queryInfo.query" size="mini">
        <!-- 合作方ID -->
        <el-form-item label="项目名称【ID】" prop="project_id">
          <el-select v-model="queryInfo.query.project_id" filterable size="mini">
            <el-option key="" label="请选择" value=""></el-option>
            <el-option v-for="item in selectData.get_project" :key="item.id" :label="item.name + '【' + item.id + '】'"
              :value="item.id"></el-option>
          </el-select>
        </el-form-item>
        <!-- 所属产品 -->
        <el-form-item label="所属产品【ID】" prop="product_id">
          <el-select v-model="queryInfo.query.product_id" filterable size="mini">
            <el-option key="" label="请选择" value=""></el-option>
            <el-option v-for="item in selectData.product" :key="item.id" :label="item.name + '【' + item.id + '】'"
              :value="item.id"></el-option>
          </el-select>
        </el-form-item>
        <!-- 卡券 -->
        <el-form-item prop="service_type" style="width: 140px;margin-right: 0px;">
          <el-select v-model="queryInfo.query.service_type" size="mini" @change='relationChange'>
            <el-option label="关联服务卡【ID】" value="4"></el-option>
            <el-option label="关联服务券【ID】" value="1"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item prop="relation_id">
          <el-select v-model="queryInfo.query.relation_id" filterable size="mini" clearable>
            <el-option key="" label="请选择" value=""></el-option>
            <el-option v-for="item in selectData.service_card_config" :key="item.id" :label="item.name + '【' + item.id + '】'"
              :value="item.id"> </el-option>
          </el-select>
        </el-form-item>
        <!-- 服务名称 -->
        <el-form-item label="服务名称【ID】" prop="service_id">
          <el-select v-model="queryInfo.query.service_id" filterable size="mini">
            <el-option key="" label="请选择" value=""></el-option>
            <el-option v-for="item in selectData.get_service" :key="item.id" :label="item.name + '【' + item.id + '】'"
              :value="item.id"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button class="theme-background-color" size="mini" @click="searchList">搜索</el-button>
          <el-button size="mini" @click="resetSearchForm">

            重置 </el-button>
        </el-form-item>
      </el-form>

      <!-- 操作区域 -->
      <div>
        <el-button class="theme-background-color" icon="el-icon-plus" size="mini"
          @click="$router.push('/project/ServiceCard')">
          新增服务卡
        </el-button>
        <el-button class="theme-background-color" icon="el-icon-plus" size="mini"
          @click="$router.push('/project/ServiceCoupon')">
          新增服务券
        </el-button>
       <!-- <el-button icon="el-icon-download" size="mini" :loading="btnLoading" @click="downloadExcel">
          导出数据
        </el-button> -->
      </div>

      <!-- 列表区域 -->
      <el-table :data="list" border stripe>
        <!-- <el-table-column label="序号" type="index"></el-table-column> -->
        <el-table-column label="服务名称【ID】" min-width="200px" max-width="400px" align="center">
          <template slot-scope="scope">
            {{ scope.row.name }}【{{ scope.row.id }}】
          </template>
        </el-table-column>
        <el-table-column label="关联的服务卡【ID】| 券【ID】" min-width="200px" max-width="400px" align="center">
          <template slot-scope="scope">
            {{ scope.row.relation_name }}【{{ scope.row.relation_id }}】
          </template>
        </el-table-column>
        <el-table-column label="所属产品【ID】" min-width="200px" max-width="400px" align="center">
          <template slot-scope="scope" v-if="scope.row.product_id !=null">
            {{ scope.row.product_name }}【{{ scope.row.product_id }}】
          </template>
        </el-table-column>
        <el-table-column label="所属项目【ID】" min-width="200px" max-width="400px" align="center">
          <template slot-scope="scope">
            {{ scope.row.project_name }}【{{ scope.row.project_id }}】
          </template>
        </el-table-column>
        <el-table-column label="有效期限" min-width="180px" align="center">
          <template slot-scope="scope">
            {{ scope.row.validity }}{{ scope.row.validity_unit.name }}
          </template>
        </el-table-column>
        <el-table-column label="适用范围" prop="scope_explain" min-width="180px" align="center"></el-table-column>
        <el-table-column label="使用区域" prop="scope_name" min-width="180px" align="center"></el-table-column>
        <el-table-column label="备注" prop="remark" min-width="180px" align="center"></el-table-column>
        <el-table-column label="操作" min-width="180px" fixed="right" align="center">
          <template slot-scope="scope">
            <el-link type="primary" @click="del(scope.row)">
              删除
            </el-link>
            &nbsp;
            <el-link type="primary" v-if="scope.row.service_type == 4"
              @click="$router.push({path: '/project/ServiceCardEdit',query: { id: scope.row.id,service_type: scope.row.service_type }})">
              编辑
            </el-link>
            <el-link type="primary" v-else
              @click="$router.push({path: '/project/ServiceCouponEdit',query: { id: scope.row.id,service_type: scope.row.service_type }})">
              编辑
            </el-link>
            &nbsp;
            <el-link type="primary" v-show="scope.row.service_type == 4 || scope.row.service_type == 3" @click="$router.push({path: '/project/ServiceSource',query: scope.row })">
              来源配置
            </el-link>
          </template>
        </el-table-column>
      </el-table>

      <!-- 分页区域 -->
      <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
        :current-page="queryInfo.pagenum" :page-sizes="[10, 20, 50, 100]" :page-size="queryInfo.pagesize"
        layout="total, sizes, prev, pager, next, jumper" :total="total">
      </el-pagination>
    </el-card>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        queryInfo: {
          query: {
            project_id: '',
            product_id: '',
            service_id: '',
            relation_id: '',
            service_type: '4'
          },
          pagenum: 1,
          pagesize: 20
        },
        list: [],
        total: 0,
        // 搜索条件
        selectData: [],
        btnLoading: false
      }
    },
    created() {
      this.getSelectData()
      if (this.$route.query.project_id != undefined) {
        this.queryInfo.query.project_id = parseInt(this.$route.query.project_id)
      }
      this.getListData()
    },
    methods: {
      async getSelectData() {
        const url = 'admin/Data/find'
        const { data: res } = await this.$http.post(url, { code: 'get_project,product,get_service,service_card_config' })
        if (res.meta.status !== 200) {
          return this.$message.error(res.meta.msg)
        }
        this.selectData = res.data
      },
      async relationChange() {
        const url = 'admin/Data/find'
        const { data: res } = await this.$http.post(url, { code: 'coupon_config' })
        if (res.meta.status !== 200) {
          return this.$message.error(res.meta.msg)
        }
        this.selectData.service_card_config = res.data.coupon_config
      },
      searchList() {
        this.queryInfo.pagenum = 1
        this.getListData()
      },
      resetSearchForm() {
        //   console.log(this)
        this.$refs.searchFormRef.resetFields()
        this.getListData()
      },
      // 表格数据
      async getListData() {
        // 返回数据重命名为res
        const {
          data: res
        } = await this.$http.post('/admin/ServiceSystem/servicePageList', this.queryInfo)
        if (res.meta.status !== 200) {
          return this.$message.error(res.meta.msg)
        }
        this.list = res.data.list
        this.total = res.data.total
      },
      // 删除项目
      async del(data) {
        // 弹框询问
        const confirmResult =
          await this.$confirm('是否确认删除服务【' + data.name + '】？', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          }).catch((err) => err)
        if (confirmResult !== 'confirm') {
          return this.$message.info('已取消操作')
        }
        const url = '/admin/ServiceSystem/delService'
        const { data: res } = await this.$http.post(url, { id: data.id })
        if (res.meta.status !== 200) {
          this.$message.error(res.meta.msg)
        }
        this.$message.success(res.meta.msg)
        this.getListData()
      },
      async downloadExcel() {
        this.btnLoading = true
        this.$http({
            method: 'post',
            url: '/admin/ServiceSystem/download',
            data: this.queryInfo,
            headers: {
              token: window.sessionStorage.getItem('token')
            },
            responseType: 'blob'
          })
          .then((res) => {
            this.btnLoading = false
            if (res.data.type) {
              // 文件下载
              const blob = new Blob([res.data], {
                type: 'application/vnd.ms-excel'
              })
              let link = document.createElement('a')
              link.href = URL.createObjectURL(blob)
              link.setAttribute('download', '优惠券配置数据.xlsx')
              link.click()
              link = null
              this.$message.success('导出成功')
            } else {
              // 返回json
              this.$message.warning(res.data.msg)
            }
          })
          .catch((err) => {
            this.btnLoading = false
            console.log(err)
            this.$message.error('下载失败')
          })
      },
      // 监听 pagesize 改变的事件
      handleSizeChange(newSize) {
        console.log(newSize)
        this.queryInfo.pagesize = newSize
        this.getListData()
      },
      // 监听 页码值 改变的事件
      handleCurrentChange(newPage) {
        console.log(newPage)
        this.queryInfo.pagenum = newPage
        this.getListData()
      }
    }
  }
</script>
